<template>
  <div class="page clipPath1">
    <div class="container">
      <div class="inner">
        <h1>Look at me!</h1>
        <p>I went to three cities to play during last summer holidays. They are Beijing, Dalian and HuHehot. I went to
          Beijing more than eight times. Beijing is the capital of China. It’s a big city. I am very familiar with
          Beijing. It takes an hour and forty minutes from Nantong to Beijing by plane. There are many tall buildings
          in Beijing.</p>
        <span>i</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import {} from "vue";
</script>
<style lang="scss">
.clipPath1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d8fffd;
  .container {
    width: 600px;
    height: 300px;
    background-color: #4ee57f;
    border-radius: 20px;
    color: white;
    clip-path: circle(50px at 550px 50px);
    transition: .5s ease-in-out;
    position: relative;
  }
  .container:hover {
    background-color: #83b4e5;
    clip-path: circle(100% at 50% 50%);
  }
  .container h1 {
    padding: 20px;
  }
  .container p {
    text-indent: 2em;
    margin: 20px;
    line-height: 24px;
  }
  .container span {
    font-size: 30px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    display: block;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    transition: .5s ease-in-out;
  }
  .container:hover span {
    opacity: 0;
  }
}
</style>